<template>
  <div class="filter">
    <el-row :gutter="20">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="formInline"
        size="mini"
      >
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="姓名" size="medium" prop="name">
              <el-input
                v-model="formInline.name"
                placeholder="职员名"
              ></el-input>
            </el-form-item></div
        ></el-col>

       <el-col :span="5"
          ><div class="grid-content bg-purple">
            <el-form-item label="职员类型"  prop="typename">
              <el-select style="width: 150px" @change="onType" v-model="formInline.typename">
                <el-option
                  v-for="item in ItemType"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item size="mini">
              <el-button type="primary" @click="onSearch()">查询</el-button>
            </el-form-item>
          </div></el-col
        >
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ItemType: [],
      query:{
        name:'',
        id:1,
      },
      formInline: {
        psize: 8, 
        page: 1,
        name: "",
        id: "",
        key: "",
        type: "",
        typename:""
      },
    };
  },
  mounted() {
    this.onType();
  },
  methods: {
    onType() {
     
      axios
        .get("http://estate.eshareedu.cn/estate/api/stafftype/list" )
        .then((res) => {
           const { errCode, data } = res.data;
         if(errCode=="10000"){
            this.ItemType = res.data.data.list;
         }
        });
    },
 
    onSearch() {
      this.$emit("emtFormLine", this.formInline);
    },
  },
};
</script>

<style lang="less" scoped>

.el-input {
  width: 100px;
}
</style>